<template>
    <div class="headtop">
        <div class="h1">
            <span class="img"><img src="https://zhyq.ailuquan.cn/website/assets/images/luquan/logo.png" alt="鹿泉区智慧企服融合平台"></span>
            <div class="h1_1">
                <svg viewBox="64 64 896 896" focusable="false" data-icon="bell" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M816 768h-24V428c0-141.1-104.3-257.8-240-277.2V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.8C336.3 170.2 232 286.9 232 428v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48z"></path></svg>
                <span><a>演示用户</a> | <a @click="logout">注销</a></span>
                <div class="searchdiv">
                    <input placeholder="输入关键字搜索" type="text" class="ant-input" v-model="obj.key" style="width: 220px;">
                    <a @click="search">搜索</a>
                </div>
            </div>
        </div>
    </div>
    <div class="headmenu">
        <div class="h2">
            <div class="item"><a href="https://zhyq.ailuquan.cn/website/shijzslqqzf">首页</a></div>
            <div class="item">
                政策服务
                <div class="d1">
                    <div class="sub">
                        <a href="https://zhyq.ailuquan.cn/website/shijzslqqzf/policy?ti=1">政策清单</a>
                        <a href="https://zhyq.ailuquan.cn/website/shijzslqqzf/policy?ti=2">政策触达</a>
                        <a href="https://zhyq.ailuquan.cn/website/shijzslqqzf/my/myEnjoyApplication">免申即享</a>
                    </div>
                </div>
            </div>
            <div class="item">
                人才服务
                <div class="d1">
                    <div class="sub">
                        <a>人才招聘</a>
                        <a>人才服务</a>
                    </div>
                </div>
            </div>
            <div class="item">
                招商地图
                <div class="d1">
                    <div class="sub">
                        <a target="_blank" href="https://zhyq.ailuquan.cn/website/investmentMap/traffic">交通区位</a>
                        <a target="_blank" href="https://zhyq.ailuquan.cn/website/investmentMap/industry">产业发展</a>
                        <a target="_blank" href="https://zhyq.ailuquan.cn/website/investmentMap/industryArea">招商区块</a>
                        <a target="_blank" href="https://zhyq.ailuquan.cn/website/investmentMap/carrier">招商载体</a>
                        <a target="_blank" href="https://zhyq.ailuquan.cn/website/shijzslqqzf/policy/policyListInvestment?pt=8">招商政策</a>
                    </div>
                </div>
            </div>
            <div class="item"><a target="_blank" href="https://zhyq.ailuquan.cn/website/investmentMap/VRDisplay">VR展示</a></div>
            <div class="item">
                专业服务
                <div class="d1">
                    <div class="sub">
                        <a>金融服务</a>
                        <a>企业填报</a>
                        <a>培训服务</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="main">
        <!-- 内容 -->
        <div class="con-box">
            <el-breadcrumb separator="/" class="mb10" v-if="breadcrumbs&&breadcrumbs.length>0">
                <el-breadcrumb-item v-for="(v,i) in breadcrumbs" :key="i"><span class="pointer">{{v.label}}</span></el-breadcrumb-item>
            </el-breadcrumb>
            <div class="router-view pb10">
                <router-view v-slot="{ Component }">
                    <keep-alive>
                        <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.path"/>
                    </keep-alive>
                    <component :is="Component" v-if="!$route.meta.keepAlive"/>
                </router-view>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="container">
            <div class="links">
                <div class="item">
                    <a target="_blank" href="http://www.gov.cn/" class="ant-dropdown-link">
                        <span>中央人民政府</span><i></i>
                    </a>
                </div>
                <div class="item">
                    <a target="_blank" href="http://www.hebei.gov.cn/" class="ant-dropdown-link">
                        <span>河北省人民政府</span><i></i>
                    </a>
                </div>
                <div class="item">
                    <a target="_blank" href="http://www.sjz.gov.cn/" class="ant-dropdown-link">
                        <span>石家庄市人民政府</span><i></i>
                    </a>
                </div>
                <div class="item">
                    <a target="_blank" href="http://www.sjzlq.gov.cn/" class="ant-dropdown-link">
                        <span>鹿泉区人民政府</span><i></i>
                    </a>
                </div>
            </div>
            <div class="f2">
                <div style="width:512px"><img src="https://zhyq.ailuquan.cn/website/assets/images/luquan/footer-logo.png"></div>
                <div class="ant-col ant-col-14" style="padding-left: 15px; padding-right: 15px;">
                    <div class="footer-write">
                        <p>主办：鹿泉区大数据中心 ,备案号：冀ICP备2021004472号</p>
                        <p>地址：鹿泉区山前大道智慧城市广场</p>
                        <p>邮编：050200，电话：83874917</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="suspension flex-center weight size32 write-color pointer" @click="obj.dialog.design=true"><span class="mb5">+</span></div>
    <el-dialog v-model="obj.dialog.design" :title="obj.dialog.designTitle" :close-on-click-modal="false" :destroy-on-close="true">
        <el-form class="datas-form" ref="material_refform" :model="obj.materialform" label-width="130px">
            <el-form-item label="名称" prop="name" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.materialform.name" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="市区街道" prop="citys" :rules="[formRulesMixin.notNull]">
                <el-cascader v-model="obj.materialform.citys" :options="hebeicitys" @change="handleChange" :props="{checkStrictly: true}" style="width:400px;" />
            </el-form-item>
            <el-form-item label="详细地址" prop="address" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.materialform.address" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="负责人" prop="man" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.materialform.man" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="mobile" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.materialform.mobile" clearable autocomplete="off" maxlength="11" show-word-limit></el-input>
            </el-form-item>
            <div class="w100 flex-row ju-flex-end">
                <el-button class="btn" :loading="false" @click.prevent="obj.dialog.design = false" native-type="submit">取消</el-button>
                <el-button type="primary" class="btn" :loading="false" @click.prevent="apply" native-type="submit">申请</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { reactive,ref,getCurrentInstance,toRefs,toRaw,watch,onBeforeUpdate } from 'vue'
import Stomp from "stompjs"
let { proxy } = getCurrentInstance()


let cururl = proxy.$route.path.split('/',2)[1]; //这个是当前路由proxy.$route，上面上路由列表router.currentRoute.value，两个不一样
let obj = reactive({
    menu:[],
    submenu:[],
    breadcrumbs: [],
    myname:"",
    key:"",
    icons: {
        staff: "\e6c8",recruit: '\e609',property: '\e6c0',news: '\e6ca',my: '\e6bd',public: '\e6cb'
    },
    stompClient: null,
    dialog: {
        design: false,
        designTitle: '申请机构',
    },
    material_refform: null,
    materialform: {
        "name":"",
        "man":"",
        "mobile":"",
        "citys": ['1301','130110'],
        "city":"",
        "address":""
    }
});

onBeforeUpdate(()=>{
    console.log('----------------------');
    console.log(proxy.$route);
    // 面包屑
    let val = proxy.$route.path.split(/\//g)[1]
    if(val=='main'){
        breadcrumbs.value = []
        return
    }
    let arr = findParents(menu.value,val,'')||[]
    breadcrumbs.value = arr.length>0?arr.concat([{label:'首页'}]).reverse():[]
})

//找到所有父节点
const findParents = (treeData,val,label)=>{
  if(treeData.length==0) return
  for(let i=0;i<treeData.length;i++){
    if((treeData[i].component == val&&treeData[i].url.indexOf(val)!=-1)||treeData[i].label==label){
      return [treeData[i]]
    }else{
      if(treeData[i].sub){
        let res = findParents(treeData[i].sub,val,treeData[i].label)
        if(res !== undefined){
          return res.concat(treeData[i])
        }
      }
    }
  }  
}
const apply = ()=>{
    if(material_refform.value){
        material_refform.value.validate((valid) => {
            if (valid) {
                console.log(obj.materialform);
                let param = {
                    ...obj.materialform,
                    city: obj.materialform.citys[obj.materialform.citys.length-1]
                }
                proxy.$ajax({baseURL:proxy.$setting.globalUrl.base,url:'root/mechanism/add',data:param,bfLoading: true}).then(d => {
                    if(d.success){
                        proxy.elMessageMixin('申请成功，审核结果将会以短信的形式通知，请留意！', 'success')
                        obj.materialform = {
                            "name":"",
                            "man":"",
                            "mobile":"",
                            "citys": ['1301','130110'],
                            "city":"",
                            "address":""
                        }
                        obj.dialog.design = false
                    }else{proxy.elMessageMixin(date.err, 'error')}
                }).catch(e => {
                    console.log(e)
                    if(e == "登录已过期，请重新登录"){
                        proxy.routerPushMixin('/')
                    }
                })
            }
        })
    }
}

let search = () => {
    window.open("https://zhyq.ailuquan.cn/website/shijzslqqzf/heardsearch?gk="+obj.key)
}

const connectSocket = ()=>{
    obj.stompClient = Stomp.client("ws://smartgarden.server.zh8848.top/chat");

    obj.stompClient.connect({},
        success => {
            console.log("websoket服务器连接成功...");
            setInterval(()=>{obj.stompClient.send('');},5000)
            //订阅
            obj.stompClient.subscribe(`/topic/company/${sessionStorage.getItem("ID")}`, res=> {
                console.log(JSON.parse(res.body))
                const msg = JSON.parse(res.body)
                let v = proxy.globalData.topicObj[msg.type]
                const notify = proxy.$notify({
                    type: v.type||'success',
                    position: 'bottom-right',
                    duration: 0,
                    title: v.title||'有新的消息通知',
                    message: `${msg.title||''} 去看看 >>`,
                    onClick: res=>{
                        goUrl(v.url,v.params)
                        notify.close()
                    }
                })
            });
            //订阅
            obj.stompClient.subscribe(`/topic/company/all`, res=> {
                console.log(JSON.parse(res.body))
                const msg = JSON.parse(res.body)
                let v = proxy.globalData.topicObj[msg.type]
                const notify = proxy.$notify({
                    type: v.type||'success',
                    position: 'bottom-right',
                    duration: 0,
                    title: v.title||'有新的消息通知',
                    message: `${msg.title||''} 去看看 >>`,
                    onClick: res=>{
                        goUrl(v.url,v.params)
                        notify.close()
                    }
                })
            });
        },
        err =>{
            console.log("websoket服务器断开了...");
            connectSocket()
        }
    );
}
connectSocket()



proxy.$ajax({
    url: 'menu',
    // url: 'getMenu',
    data: {},
    bfLoading: true
}).then(d => {
    // d.msg.authority.forEach(m => {
    d.msg.forEach(m => {
        m.showhid = !m.sub.some((v,i) => v.component == cururl) //返回bool，有一个满足即true
        if(!m.showhid){
            let ms = m.sub.filter(e => e.show);
            ms.forEach(e => e.selected = e.component == cururl)
            submenu.value = ms
        }
        m.sub = m.sub.filter(e => e.show && e.label);
        m.show = m.sub.some(t => t.label) //这是用来判断，子项若没有，本项不显示
        m.content = obj.icons[m.icon];
    })
    // menu.value = d.msg.authority.filter(t => t.show)
    // myname.value = d.msg.name
    menu.value = d.msg.filter(t => t.show)
}).catch(e => {
    console.log(e)
    if(e == "登录已过期，请重新登录")
        proxy.routerPushMixin('/')
})

let logout = () => {
    sessionStorage.clear()
    proxy.routerPushMixin("/")
}
let toMenu = (m,n) => {
    // console.log(toRaw(m))
    // console.log(toRaw(n))
    menu.value.forEach(ev=>{
        ev.sub.forEach(e => e.selected = e.component == n.component)
    })
    submenu.value = m.sub.filter(e => e.show)
    proxy.routerPushMixin(n.component)
    // console.log(proxy.$utils.findParents(menu.value,n.label,'label'));
}

let goUrl = (url) =>{
    menu.value.forEach(ev=>{
        let showhid = true
        ev.sub.forEach(e => {
            e.selected = e.component == url
            if(showhid){
                showhid = !(e.component == url)
            }
        })
        ev.showhid = showhid
    })
    proxy.routerPushMixin(url)
}

//导出到页面
let { menu, submenu, breadcrumbs, myname, form, manalist, material_refform } = toRefs(obj)
</script>

<style lang="scss" scoped>
.suspension{
    position: fixed;right: 50px;bottom: 200px;z-index: 1;
    width: 40px;height: 40px;border-radius: 40px;background: #3586f4;
}
.headtop {
    border-top: 3px solid #28a7e1;
    .h1 {
        height:102px; display: flex; margin: 0 auto; max-width: 1200px; min-width: 1200px; width: 100%; box-sizing: border-box; font-size:14px;
        .img { display: flex; align-items: center; }
        img { height: 84px; }
        .h1_1 {
            flex: 1; display: flex; justify-content: flex-end; align-items: center; 
            svg { margin-right:10px;}
            span a { margin:0 5px; }
            .searchdiv {
                input { display:block; float:left; background: #fff; border: 1px solid #dcdcdc; height: 30px; margin-left: 10px; width: 156px!important; }
                a { display:block; float:left; background: #1f71e0; color: #fff; height: 30px; line-height: 30px; text-align: center; width: 64px; }
            }
        }
    }
}
.headmenu {
    height:51px; background-color: #1f71e0; border-bottom: 2px solid #0a4db2; box-shadow: 0 6px 9px 0 rgb(8 1 3 / 16%); transition: all .2s;
    .h2 {
        max-width: 1200px; min-width: 1200px; width: 100%; height:51px; box-sizing: border-box; display:flex; margin:0 auto;
        a { color:#FFFFFF; }
        .item {
            color: #FFFFFF; font-size:18px; flex: 1; text-align: center; line-height: 51px; cursor: pointer; position: relative;
            .d1 { padding-top:8px;
                .sub {
                    display:none; position:relative; background:#1f71e0; border-radius:3px; z-index:100;
                    a { display: block; color:#FFFFFF; height:45px; line-height:45px; text-align:left; padding-left: 15px; font-size:15px; opacity: .7; }
                    a:hover { opacity: 1; } 
                }
            }
        }
        .item:hover { 
            background:#3586f4;
            .sub { display: block; }
        }
    }
}
#main {
    max-width: 1200px; min-width: 1200px; width: 100%; box-sizing: border-box; display:flex; margin:0 auto; padding:16px 0;
    .left {
        width: 237px; font-size: 16px; border: 1px solid #f0f0f0; box-sizing: border-box; margin: 0 8px;
        
        .item {
            color: #333333;
            * { clear: both; display: block; }
            &:first-child::before { height: 0; }
            &:hover { color: #096dd9; }
            span { 
                font-size: 16px; height: 72px; line-height: 72px;
                &::after { font-family: iconfont; content: '\e74c'; display: block; float: right; color: #9f9f9f; margin-right: 16px; font-size: 12px; }
                &:hover::after,&:hover::before { color: #096dd9; }
                &::before { font-family: iconfont; color: #9f9f9f; margin-right: 16px; margin-left: 24px; }
            }
            .staff::before{content: '\e6c8';}
            .recruit::before{content: '\e6c9';}
            .property::before{content: '\e6c0';}
            .news::before{content: '\e6ca';}
            .my::before{content: '\e6bd';}
            .public::before{content: '\e6cb';}
            .visitor::before{content: '\e6c8';}
            a {
                font-size: 16px; height: 50px; line-height: 50px; cursor: pointer; background-color: #fafafa;
                // &.t1 { color: #FFFFFF; background-color: #2B8DEF; }
                &.t1 { border-radius: 6px; background:#096dd9!important; box-shadow: 0 6px 8px 0 rgb(0 106 241 / 36%); color: #fff; margin: 0 -10px;}
                // &.t1:before { content:"\e630"; font-family:iconfont; margin: 0 10px 0 24px; font-size:20px; }
                &::before {content: '\e64e';font-family: iconfont; padding-left:48px; padding-right:12px; font-size: 14px;}
            }
             .staff_::before{content: '\e64e';}.recruit_::before{content: '\e623';}.persion_::before{content: '\e63c';}
             .applyfor_::before{content: '\e62e';}.interview_::before{content: '\e659';}.parking_::before{content: '\f712';}
             .repair_::before{content: '\e65e';}.life_::before{content: '\e8a9';}.news_::before{content: '\e771';}
             .persion_::before{content: '\e64e';}.activity_::before{content: '\e64d';}.train_::before{content: '\e78c';}
             .finance_::before{content: '\e688';}.banking_::before{content: '\e688';}.financialpolicy_::before{content: '\e64b';}
             .insurance_::before{content: '\e895';}
            
            &.hid {
                a { display: none; }
                span::after { content: '\e665'; }
            }
        }
    }
    .con-box {
        width: 1200px; height: auto;font-size: 16px;
        .router-view{
            width: 1200px;
        }
    }
}
// #main #submenu { position: relative; left: 20px; top: 20px; right: 0; height: 37px; border-bottom: 1px solid #DDD; }
// #main #submenu span { display: none; }
// #main #submenu::after { content: ''; display: block; clear: both; }
// #main #submenu a { padding:8px 16px; font-size: 14px; color: #333; display: block; float: left; border:1px solid #DDD; margin-left: -1px; }
// #main #submenu a.selected { border-bottom: 1px solid #FFF; background-color: #FFF; border-top: 2px solid #3a4fbd;}
// #main #subbody { position: absolute; left: 20px; right: 20px; bottom: 0px; top: 70px; }
// #main #subbody > div { width: 100%; height: 100%; }

.footer {
    background-color: #1a509a; padding: 15px 0;color: #fff;
    .container { margin: 0 auto; max-width: 1200px; min-width: 1200px; width: 100%; box-sizing: border-box; }
    .links { 
        color: #FFFFFF; display: flex; justify-content: space-between; height:68px;
        .item {
            flex:1; margin:0 7px; font-size:14px;
            a { 
                background-color: #0a67b1; border: 1px solid #97b0d1; border-radius: 3px; color: #fff; box-sizing: border-box;
                display: flex; height: 38px; line-height: 38px; padding: 0 0px 0 12px; 
                span { flex:1 }
                i { width:38px; text-align: center; }
                i:before { font-style: normal; content:'\e629'; font-family:iconfont;  }
            }
        }
    }
    .f2 { display: flex; font-size:14px;
        p { line-height: 1.5; margin: 0; }
    }
}

</style>